<template>
	<div style="height: 100%;" v-loading="loading">
		<div style="display: flex;" class=" mt10">
			<div style="width: 1223px;height: 980px;display: flex;flex-direction: column;">

				<div style="height: 490px;" v-if="dataList1.length">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);"
						class="displayFlex mb12">
						<div class="inset-box">在线监测</div>
					</div>

					<div style="overflow-y: auto;" :style="{'height':dataList1.length?'440px':'0'}">
						<div v-for="(item,index) in dataList1" :key="index" class="mb20">
							<div class="mb10 displayFlexBet">
								<div class="displayFlex">
									<div v-if="item.monitorType == 'CEMS'" class="textCenter mr5 font13 colorfff"
										style="width: 48px;height: 20px;background: linear-gradient(-90deg, #CE8555, #E4A982);border-radius: 3px;">
										CEMS
									</div>
									<div v-if="item.monitorType == 'AIR_SITE'" class="textCenter mr5 font13 colorfff"
										style="width: 58px;height: 20px;background: linear-gradient(-90deg, #5B81A8, #8DADCE);;border-radius: 3px;">
										空气微站
									</div>
									<div class="mr10 colorfff font14">{{item.outletName}}（{{item.monitorName}}）</div>
									<div v-if="item.onlineStatusStr == '在线'" class="textCenter mr5 font13"
										style="width: 40px;height: 20px;background: #8DE5A8;border-radius: 3px;color: #016344;">
										{{item.onlineStatusStr}}
									</div>
									<div v-else class="textCenter mr5 font13"
										style="width: 40px;height: 20px;background: #C8C8C8;border-radius: 3px;color: #444;">
										{{item.onlineStatusStr}}
									</div>
								</div>
								<div style="color: #75E7FF;font-size: 12px;">{{item.latestTime}}</div>
							</div>

							<div class="displayFlex" style="">
								<div v-if="item.pollutionList && item.pollutionList.length > 0" class="mr20"
									style="width: calc(100% - 302px);overflow-x: auto;white-space: nowrap;border-radius: 8px;border: 1px solid #0B3485;">
									<div v-for="(item2,index2) in item.pollutionList" :key="index2"
										@click="$router.push('/wasteGas/onlineSurveyDet?outletId='+item.outletId)"
										:style="{'borderRight':(index2 == item.pollutionList.length - 1)?'':'1px solid#0B3485'}"
										style="padding: 20px;width: 310px;display: inline-block;" class="mr10 bra8 point">
										<div class="mb10 colorfff font14">{{item2.pollutionName}}</div>
										<div style="color: #75E7FF;">
											<span class="font24" v-if="item2.monitorType == 'CEMS'">{{item2.zsAmount}}</span>
											<span class="font24" v-else>{{item2.actualAmount}}</span>
											<span class="font14">{{item2.unitValue}}</span>
										</div>
									</div>
								</div>

								<div style="border: 1px solid #0B3485;background: #041C62;width: 302px;" class="displayFlex">
									<div style="padding: 20px 10px;width: 151px;">
										<div class="displayFlex mb10" style="justify-content: center;">
											<img src="@/assets/sIcon77.png" style="width: 20px;height: 20px;" class="mr5" />
											<span class="font14 colorfff">24小时</span>
											<span class="font14 colorfff">超标</span>
										</div>
										<div class="font24 textCenter" style="color: #75E7FF;">
											{{item.warningNum || '--'}}
										</div>
									</div>
									<div style="width: 1px;height: 100px;background: #0B3485;"></div>
									<div style="padding: 20px 10px;width: 151px;">
										<div class="textCenter mb10">
											<span class="font14 colorfff">30天时段</span>
											<span class="font14 colorfff">达标</span>
										</div>
										<div class="font24 textCenter" style="color: #75E7FF;">
											{{item.qualifiedPercent || '--'}}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div style="height: 490px;">
					<div style="height: 32px;background: linear-gradient(270deg, #041C62, #1649A4);"
						class="displayFlex mb12">
						<div class="inset-box">自行监测</div>
					</div>

					<div style="overflow-y: auto;" :style="{'height':dataList1.length?'440px':'880px'}">
						<div v-for="(item,index) in dataList2" :key="index" class="mb20">
							<div class="mb10 displayFlexBet">
								<div class="displayFlex">
									<div class="mr10 colorfff font14">{{item.outletName}}</div>

								</div>
								<div style="color: #75E7FF;font-size: 12px;">{{item.latestTime}}</div>
							</div>

							<div class="displayFlex" style="">
								<div v-if="item.pollutionList && item.pollutionList.length > 0" class="mr20"
									style="width: calc(100% - 302px);overflow-x: auto;white-space: nowrap;border-radius: 8px;border: 1px solid #0B3485;">
									<div v-for="(item2,index2) in item.pollutionList" :key="index2"
										@click="$router.push('/wasteGas/onlineSurveyDet?outletId='+item.outletId)"
										:style="{'borderRight':(index2 == item.pollutionList.length - 1)?'':'1px solid#0B3485'}"
										style="padding: 20px;width: 310px;display: inline-block;" class="mr10 bra8 point">
										<div class="mb10 colorfff font14">{{item2.pollutionName}}</div>
										<div style="color: #75E7FF;">
											<span class="font24" v-if="item2.monitorType == 'CEMS'">{{item2.zsAmount}}</span>
											<span class="font24" v-else>{{item2.actualAmount}}</span>
											<span class="font14">{{item2.unitValue}}</span>
										</div>
									</div>
								</div>

								<div style="border: 1px solid #0B3485;background: #041C62;width: 302px;" class="displayFlex">
									<div style="padding: 20px 10px;width: 151px;">
										<div class="displayFlex mb10" style="justify-content: center;">
											<img src="@/assets/sIcon188.png" style="width: 20px;height: 20px;" class="mr5" />
											<span class="font14 colorfff">监测完成率</span>

										</div>
										<div class="font24 textCenter" style="color: #75E7FF;">
											{{item.completePercent || '--'}}
										</div>
									</div>
									<div style="width: 1px;height: 100px;background: #0B3485;"></div>
									<div style="padding: 20px 10px;width: 151px;">
										<div class="textCenter mb10">
											<span class="font14 colorfff">监测达标率</span>
											<span class="font14 colorfff"></span>
										</div>
										<div class="font24 textCenter" style="color: #75E7FF;">
											{{item.qualifiedPercent || '--'}}
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>

				</div>
			</div>

			<div style="width:616px;height: 950px;overflow-y: auto;" class=" ml10">
				<div v-if="dataList1.length"
					style="height: 50%;background: linear-gradient(0deg, #041452, #041C62);width: 100%;border-top-left-radius: 20px;position: relative;">

					<div style="padding: 39px 60px;" class="displayFlex">
						<img src="@/assets/bigScreen/icon24.png" style="width: 15px;height: 20px;" />
						<div style="font-family: Source Han Sans CN;font-weight: 400;font-size: 18px;color: #FFFFFF;
						background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;" class="ml20">在线监测达标率</div>
					</div>

					<div class="displayFlexBet">
						<div class="textCenter" style="justify-content: center;flex: 1;position: relative;">
							<el-progress type="circle" :percentage="dataList3.hourDataPercent" color="#9CEAB4" :width="120"
								:stroke-width="8" :show-text="false"></el-progress>
							<div style="position: absolute;top: 30%;left: 0%;text-align: center;right: 0;">
								<div style="color: #75E7FF;font-size: 20px;">{{dataList3.hourDataPercent}}</div>
								<div style="color: #fff;font-size: 14px;">小时数据</div>
							</div>
						</div>

						<div class="textCenter" style="justify-content: center;flex: 1;position: relative;">
							<el-progress type="circle" :percentage="dataList3.dayDataPercent" color="#9CEAB4" :width="120"
								:stroke-width="8" :show-text="false"></el-progress>
							<div style="position: absolute;top: 30%;left: 0%;text-align: center;right: 0;">
								<div style="color: #75E7FF;font-size: 20px;">{{dataList3.hourDataPercent}}</div>
								<div style="color: #fff;font-size: 14px;">日数据</div>
							</div>
						</div>
					</div>
					<img src="../../assets/bigScreen/icon47.png"
						style="width: 60px;height: 423px;position: absolute;top: 0%;left: 0%;" />
					<img src="../../assets/bigScreen/icon46.png"
						style="width: 100%;height: 125px;position: absolute;bottom: 0%;left: 0%;" />
				</div>
				<div class="mt12"
					style="height: 50%;background: linear-gradient(0deg, #041452, #041C62);width: 100%;border-top-left-radius: 20px;position: relative;">

					<div style="padding: 39px 60px;" class="displayFlex">
						<img src="@/assets/bigScreen/icon24.png" style="width: 15px;height: 20px;" />
						<div style="font-family: Source Han Sans CN;font-weight: 400;font-size: 18px;color: #FFFFFF;
						background: linear-gradient(180deg, #FFFFFF 0%, #83B7FF 100%);-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;" class="ml20">自行监测达标率</div>
					</div>

					<div class="displayFlexBet">
						<div class="textCenter" style="justify-content: center;flex: 1;position: relative;">
							<el-progress type="circle" :percentage="dataList4.completePercent" color="#9CEAB4" :width="120"
								:stroke-width="8" :show-text="false"></el-progress>
							<div style="position: absolute;top: 30%;left: 0%;text-align: center;right: 0;">
								<div style="color: #75E7FF;font-size: 20px;">{{dataList4.completePercent}}</div>
								<div style="color: #fff;font-size: 14px;">监测完成率</div>
							</div>
						</div>

						<div class="textCenter" style="justify-content: center;flex: 1;position: relative;">
							<el-progress type="circle" :percentage="dataList4.qualifiedPercent" color="#9CEAB4" :width="120"
								:stroke-width="8" :show-text="false"></el-progress>
							<div style="position: absolute;top: 30%;left: 0%;text-align: center;right: 0;">
								<div style="color: #75E7FF;font-size: 20px;">{{dataList4.qualifiedPercent}}</div>
								<div style="color: #fff;font-size: 14px;">监测达标率</div>
							</div>
						</div>
					</div>
					<img src="../../assets/bigScreen/icon47.png"
						style="width: 60px;height: 423px;position: absolute;top: 0%;left: 0%;" />
					<img src="../../assets/bigScreen/icon46.png"
						style="width: 100%;height: 125px;position: absolute;bottom: 0%;left: 0%;" />
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import * as echarts from 'echarts';

	import moment from 'moment'
	import elProgress from '@/components/progress'

	let that
	export default {
		name: "onlineSurveyPreview",
		components: {
			elProgress
		},
		data() {
			return {
				loading: false,
				dataList1: [],
				dataList2: [],
				dataList3: {},
				dataList4: {}
			}
		},
		created: function() {},
		mounted: function() {
			that = this
			that.getGasOnlineLatestMonitorList()
			that.getManualMonitorDet()
			that.countGasMonitorDet()
		},
		methods: {
			countGasMonitorDet() {
				that.ajax({
					url: '/gasOutlet/countGasMonitorDet',
					data: JSON.stringify({
						monitorType: ''
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList3 = result.data
					}
				})

				that.ajax({
					url: '/oneMap/countManualMonitorDet',
					data: JSON.stringify({
						monitorType: ''
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList4 = result.data
					}
				})
			},


			getGasOnlineLatestMonitorList: function(value) {
				that.loading = true
				that.ajax({
					url: '/gasOutlet/getGasOnlineLatestMonitorList',
					data: JSON.stringify({
						monitorType: ''
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList1 = result.data
						that.loading = false
					}
				})
			},

			getManualMonitorDet: function(value) {
				that.loading = true
				that.ajax({
					url: '/oneMap/getManualMonitorDet',
					data: JSON.stringify({
						monitorType: ''
					}),
					contentType: 'application/json',
					success: function(result) {
						that.dataList2 = result.data
						that.loading = false
					}
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.selected {
		color: #3A3EF4;
	}

	.selectedBorder {
		border-bottom: 1px solid#3A3EF4;
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 2px;
	}

	.el-tag.el-tag--success {
		background: #8DE5A8;
		color: #333;
	}
</style>

<style scoped>
	.inset-box {
		background-image: url('../../assets/bigScreen/icon6.png');
		width: 140px;
		height: 32px;
		line-height: 32px;
		padding-left: 11px;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 18px;
		color: #FFFFFF;
	}

	.inset-box::before {
		width: 0px;
		height: 0px;
		position: absolute;
		content: '';
		top: 0px;
		right: 0px;
		border: 5px solid #041C62;
		border-bottom-color: transparent;
		border-left-color: transparent;
	}
</style>